<template>
    <div class="person-box">
        <el-form class="form-box" :model="formData" :rules="formRules" label-width="auto" style="max-width: 600px">
            <el-form-item label="账号">1111</el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="formData.userName" :maxlength="20" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="formData.sex">
                    <el-radio value="1">男</el-radio>
                    <el-radio value="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker v-model="formData.birthday" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%" />
            </el-form-item>
            <el-form-item label="手机">
                <el-input v-model="formData.phone" :maxlength="11" placeholder="请输入手机" />
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="formData.nickName" :maxlength="50" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="兴趣爱好">
                <el-input v-model="formData.hybird" :maxlength="500" type="textarea" placeholder="请输入兴趣爱好" :rows="4" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存基本信息</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue'

const formRules = reactive({
    userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
    nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    email: [{ required: true, message: '请输入email', trigger: 'blur' }]
})

const formData = reactive({
    account: undefined,
    userName: undefined,
    phone: undefined,
    nickName: undefined,
    sex: undefined,
    birthday: undefined,
    email: undefined,
    hybird: undefined
})

const onSubmit = () => {
    console.log('submit!')
}
</script>
<style lang="scss" soped>
.person-box {
    width: auto;
    height: auto;
    padding: 15px 30px;
    box-sizing: border-box;
    .form-box {
        width: auto;
        height: auto;
        background-color: #fff;
        border-radius: 2px;
        padding: 16px;
        box-sizing: border-box;
    }
}
</style>
